<div ng-init="init();" class="kmi-layout-content mobile08-content">
    <div class="kmi-header-row">
        <div class="kmi-side-btn left" ng-click="back();">
            <i class="material-icons">&#xE408;</i>
            <div class="kmi-can-click"></div>
        </div>
        <div class="header-title" ng-bind="'mobile08.title' | translate"></div>
    </div>
    <div class="kmi-layout-main-content system-info">
        <div class="kmi-row-fields" style="padding: 8px; border-bottom: 1px #cecece solid;">
            <div class="column-item">
                <label class="label" ng-bind="'mobile08.loading_time' | translate"></label>
                <label class="value" ng-bind="loading_time"></label>
                <div style = "flex: 1;"></div>
                <button class="kmi-button__mobile" ng-click="search();" style="flex: 0 0 60px;">
                    <label ng-bind="'mobile08.refresh' | translate"></label>
                    <div class="kmi-can-click"></div>
                </button>
            </div>
        </div>
        <div class="kmi-row-fields" style="border-bottom:1px #cecece solid;">
            <div class="dashboard-item">
                <div mdl-piechart datas="pie_data_users" config="pieChart_config"></div>
            </div>
            <div class="dashboard-label-content">
                <div class="dashboard-label-item" ng-repeat="item in query_result" ng-class="[machineStatus(getStatusCode(item.ID))]">
                    <div class="item-label" ng-bind="'mobile08.machine_status.' + item.ID | translate"></div>
                    <div class="item-value" ng-bind="item.QTY"></div>
                    <div class="kmi-can-click" ng-click="showItemDetail(item);"></div>
                </div>
            </div>
        </div>
        <!--
        <div class="kmi-list none-column-split">
            <div class="kmi-list__header" style="padding: 4px 8px;">
                <div class="kmi-list__column" style="flex: 0 0 48px;" ng-bind="'mobile08.list.column1'|translate"></div>
                <div class="kmi-list__column" style="flex: 1;" ng-bind="'mobile08.list.column2'|translate"></div>
                <div class="kmi-list__column head-controls" style="flex: 1;">
                    <div class="order">
                        {{'mobile08.list.column3' | translate}}
                        <i class="material-icons">{{QTY_oderBy?'&#xE5D8;':'&#xE5DB;'}}</i>
                        <div class="kmi-can-click" ng-click="QTY_oderBy = !QTY_oderBy"></div>
                    </div>
                </div>
            </div>
            <div class="kmi-list__row-content">
                <div class="kmi-list__row" ng-repeat="item in query_result | filter : {'ID': status.value} : true | orderBy : 'QTY' : !QTY_oderBy track by $index" style="padding: 4px 8px; height: 42px;">
                    <div class="kmi-list__column" style="flex:0 0 48px;">
                        <div class="dashboard-light-panel" ng-class="[machineStatus(getStatusCode(item.ID))]"></div>
                    </div>
                    <div class="kmi-list__column" ng-bind="'mobile08.machine_status.' + item.ID | translate" style="flex: 1;"></div>
                    <div class="kmi-list__column" ng-bind="item.QTY" style="flex: 1;"></div>
                    <div class="kmi-can-click" ng-click="showItemDetail(item);"></div>
                </div>
            </div>
        </div>
        -->
        <div class="kmi-list none-column-split">
            <div class="kmi-list__header" style="padding: 4px 8px;">
                <div class="kmi-list__column head-controls" style="flex: 1;">
                    <div class="order" ng-hide="EQUIPMENTNAME_filter">
                        <i class="material-icons search" style="z-index:1;" ng-click="EQUIPMENTNAME_filter = true">search</i>
                        <label ng-bind="'mobile08.item_detail.list.column1' | translate"></label>
                    </div>
                    <div class="filter" ng-show="EQUIPMENTNAME_filter">
                        <input ng-model="EQUIPMENTNAME_filter_s">
                        <i class="material-icons clear" style="position: absolute;top: 2px;right: 0px;" ng-show="EQUIPMENTNAME_filter"
                            ng-click="EQUIPMENTNAME_filter = false;EQUIPMENTNAME_filter_s=''">clear</i>
                    </div>
                </div>
                <div class="kmi-list__column" style="flex: 0 0 140px;" ng-bind="'mobile08.item_detail.list.column2'|translate"></div>
                <div class="kmi-list__column head-controls" style="flex: 0 0 100px;">
                    <div class="order">
                        {{'mobile08.item_detail.list.column3' | translate}}
                        <i class="material-icons">{{MINUTE_oderBy?'&#xE5D8;':'&#xE5DB;'}}</i>
                        <div class="kmi-can-click" ng-click="MINUTE_oderBy = !MINUTE_oderBy"></div>
                    </div>
                </div>
            </div>
            <div class="kmi-list__row-content">
                <div class="kmi-list__row" ng-repeat="item in itemDetail | filter : {'EQUIPMENTNAME': EQUIPMENTNAME_filter_s} | orderBy : 'MINUTE' : !MINUTE_oderBy track by $index" style="padding: 4px 8px; height: 42px;">
                    <div class="kmi-list__column" ng-bind="item.EQUIPMENTNAME" style="flex: 1; white-space: normal;"></div>
                    <div class="kmi-list__column" ng-bind="item.STARTTIME" style="flex: 0 0 140px;"></div>
                    <div class="kmi-list__column" ng-bind="item.MINUTE + ('mobile08.item_detail.min'|translate)" style="flex: 0 0 100px; text-align: right;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
